feat(accessibility): implement WCAG 2.1 AA compliance fixes#63
Merged
akash-kumar-dev merged 1 commit intobrowseping:mainfrom Jan 31, 2026
Conversation
|
@shruthideepikareddy is attempting to deploy a commit to the Akash Kumar's projects Team on Vercel. A member of the Team first needs to authorize it. |
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
There was a problem hiding this comment.
Pull request overview
This PR focuses on improving accessibility to align the BrowsePing site with WCAG 2.1 AA guidelines, especially for zoom, screen readers, and decorative UI elements.
Changes:
- Enabled pinch-to-zoom by updating the global viewport configuration to allow user scaling up to 5x.
- Added appropriate ARIA attributes (aria-label, aria-expanded, aria-hidden) across navigation, icons, and decorative elements to improve screen-reader behavior and reduce noise.
- Hid purely decorative visuals (mouse follower, animated background, and various icons) from the accessibility tree while preserving meaningful textual labels.
Reviewed changes
Copilot reviewed 16 out of 16 changed files in this pull request and generated no comments.
Show a summary per file
| File | Description |
|---|---|
| src/app/layout.tsx | Updates the global viewport to support user zoom and keeps the root layout structure consistent, directly addressing the pinch-to-zoom accessibility requirement. |
| src/components/ui/MouseFollower.tsx | Marks the mouse follower cursors as aria-hidden so they don’t interfere with screen readers. |
| src/components/ui/AnimatedBackground.tsx | Hides the decorative canvas background from assistive technologies via aria-hidden. |
| src/components/layout/Navbar.tsx | Cleans up pathname usage and adds aria-label/aria-expanded to the mobile menu toggle while marking decorative icons as aria-hidden. |
| src/components/layout/Footer.tsx | Ensures social icons are treated as decorative (aria-hidden) with the link text provided via aria-label, improving SR output. |
| src/components/leaderboard/PublicLeaderboard.tsx | Marks loading, user, award, and clock icons as decorative while retaining textual labels for screen readers. |
| src/components/leaderboard/PromotionalSection.tsx | Hides decorative download, arrow, GitHub, and star icons from the accessibility tree. |
| src/components/leaderboard/LeaderboardHero.tsx | Treats the badge and button icons as decorative by adding aria-hidden. |
| src/components/home/HeroSection.tsx | Hides decorative GitHub and feature icons, and button icons (download/arrow) from the a11y tree while retaining visible text labels. |
| src/components/download/ZipDownload.tsx | Adds aria-hidden to feature, archive, and download icons used purely for visual emphasis. |
| src/components/download/PlatformsList.tsx | Marks download/external-link and globe icons as decorative so screen readers focus on the adjacent text. |
| src/components/download/InstallationGuide.tsx | Hides prerequisite, step, chevron, and success icons from assistive tech, relying on the accompanying text for meaning. |
| src/components/download/DownloadHero.tsx | Treats badge and feature icons as decorative while preserving descriptive text content. |
| src/components/contact/ContactUs.tsx | Marks message, mail, and GitHub icons as decorative, keeping link and section labels as the accessible names. |
| src/components/about/AboutValues.tsx | Hides value icons from the accessibility tree while keeping the textual titles and descriptions accessible. |
| src/components/about/AboutHero.tsx | Marks story and stats icons as decorative to reduce screen-reader clutter without losing context. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
akash-kumar-dev
approved these changes
Jan 31, 2026
Member
|
Looks good to me. Thanks for your valuable contributions, @shruthideepikareddy. |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Description
This pull request implements a comprehensive accessibility audit and fix suite to achieve full WCAG 2.1 AA compliance for the BrowsePing website. The changes ensure the site is inclusive for users with visual impairments, mobile users requiring zoom, and those using screen readers.
Related Issue
Closes #59
Type of Change
UI/UX improvement
Changes Made
Enabled Pinch-to-Zoom: Modified viewport metadata in src/app/layout.tsx to allow user scaling (up to 5x), improving usability for visually impaired users.
Accessible Navigation: Added dynamic aria-label and aria-expanded attributes to the mobile menu toggle in src/components/layout/Navbar.tsx for better screen reader support.
Decorative Icon Cleanup: Performed a site-wide sweep to add aria-hidden="true" to purely decorative icons in over 13 components, avoiding screen reader clutter.
UI Polish Hiding: Hided the decorative MouseFollower and AnimatedBackground canvas from the accessibility tree.
Contrast Verification: Audited and confirmed that all dark theme text colors meet the WCAG AA 4.5:1 contrast ratio requirement.
Bug fix (non-breaking change which fixes an issue)
New feature (non-breaking change which adds functionality)
Breaking change (fix or feature that would cause existing functionality to not work as expected)
Documentation update
Code refactoring
Performance improvement
UI/UX improvement
Content update
Chore/maintenance
Related Issue
Closes #59
Testing Done
Please describe how you tested your changes:
npm run dev)npm run build && npm start)npm run lint)Checklist
IMPORTANT: Please ensure all items are checked before submitting. PRs that don't follow these guidelines may be closed.
Additional Notes
Any additional information that would be helpful for reviewers?
Remember: Quality over quantity. A well-tested, properly documented small PR is better than a large, rushed contribution.
For more details, please refer to our Contributing Guidelines.